<template>
    <div>
        <button @click="switchComponent('ComponentA')">切换到组件A</button>
        <button @click="switchComponent('ComponentB')">切换到组件B</button>
        <KeepAlive>
            <component :is="currentComponent" :key="currentComponent"/>
        </KeepAlive>
    </div>
</template>
  
<script setup >
import { shallowRef ,ref, defineAsyncComponent } from 'vue';

// 创建一个响应式引用，用于存储当前需要展示的组件名称
const currentComponent = shallowRef();

// 定义异步组件

const ComponentA = defineAsyncComponent(() => import('./chat.vue'));
const ComponentB = defineAsyncComponent(() => import('./v3props.vue'));


// 切换组件的方法
const switchComponent = (componentName) => {
    if (componentName === 'ComponentA') {
        currentComponent.value = ComponentA;
    } else if (componentName === 'ComponentB') {
        currentComponent.value = ComponentB;
    }
};
</script>
<style scoped lang="scss"></style>